85:I[903690,["/chat-static/_next/static/immutable/chunks/0t5koc6gywtjg.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2d_66tvt_-qxg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3kqqw4c8munb9.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3tdrqbs7rcxs4.js","/chat-static/_next/static/immutable/chunks/2-h-ggegl4qz4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2niei3xz3mph4.js","/chat-static/_next/static/immutable/chunks/3j1smr879e_f6.js","/chat-static/_next/static/immutable/chunks/1j4n_6xagcur9.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3b6uum5y_1nfz.js"],"ExplicitChatIdProvider"] 86:I[838238,["/chat-static/_next/static/immutable/chunks/0t5koc6gywtjg.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2d_66tvt_-qxg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3kqqw4c8munb9.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3tdrqbs7rcxs4.js","/chat-static/_next/static/immutable/chunks/2-h-ggegl4qz4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2niei3xz3mph4.js","/chat-static/_next/static/immutable/chunks/3j1smr879e_f6.js","/chat-static/_next/static/immutable/chunks/1j4n_6xagcur9.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3b6uum5y_1nfz.js"],"SWRDataProvider"] 87:T4bc1,[V0_FILE]typescriptreact:file="app/page.tsx" import TweetGLSLVisualization from "@/components/TweetGLSLVisualization" export default function Home() { return (

) } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]plaintext:file="public/audio/sequence-01.mp3" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Sequence%2001-669JJTXJQW0eqhdRMLx654vjsFk2F5.mp3" [V0_FILE]typescriptreact:file="components/TweetGLSLVisualization.tsx" isFixed="true" isQuickEdit="true" "use client" import { useRef, useEffect, useState } from "react" export default function TweetGLSLVisualization() { const canvasRef = useRef(null) const audioRef = useRef(null) const [isPlaying, setIsPlaying] = useState(false) const [gl, setGl] = useState(null) const [program, setProgram] = useState(null) const [vao, setVao] = useState(null) const [resolutionUniformLocation, setResolutionUniformLocation] = useState(null) const [timeUniformLocation, setTimeUniformLocation] = useState(null) const [mouseUniformLocation, setMouseUniformLocation] = useState(null) const [zoomUniformLocation, setZoomUniformLocation] = useState(null) const [animationFrameId, setAnimationFrameId] = useState(null) const [mousePos, setMousePos] = useState<{ x: number; y: number }>({ x: 0, y: 0 }) const [startTime, setStartTime] = useState(Date.now()) const [zoom, setZoom] = useState(1.0) const toggleAudio = () => { if (audioRef.current) { if (isPlaying) { audioRef.current.pause() setIsPlaying(false) } else { audioRef.current.play() setIsPlaying(true) } } } const handleAudioEnded = () => { setIsPlaying(false) } const handleMouseMove = (event: MouseEvent) => { const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() setMousePos({ x: event.clientX - rect.left, y: canvas.height - (event.clientY - rect.top), }) } const handleZoomIn = () => { setZoom((prev) => Math.min(prev * 1.5, 10.0)) } const handleZoomOut = () => { setZoom((prev) => Math.max(prev / 1.5, 0.1)) } const handleZoomReset = () => { setZoom(1.0) } useEffect(() => { const canvas = canvasRef.current if (!canvas) return // WebGL Setup: Get the WebGL2 rendering context const glContext = canvas.getContext("webgl2") if (!glContext) { console.error("WebGL2 not supported") return } setGl(glContext) // Audio setup const audio = audioRef.current if (audio) { audio.loop = true audio.volume = 0.7 // Auto-play the music when the visualization starts audio .play() .then(() => { setIsPlaying(true) }) .catch((error) => { console.log("Audio autoplay prevented:", error) }) } // 2. Shader Implementation: Define Vertex and Fragment Shaders // The vertex shader is minimal, its job is to create a full-screen triangle/quad to draw on. const vertexShaderSource = `#version 300 es in vec4 a_position; void main() { gl_Position = a_position; } ` const fragmentShaderSource = `#version 300 es precision highp float; out vec4 outColor; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; // Standard HSV to RGB conversion function vec3 hsv(float h, float s, float v) { vec4 t = vec4(1., 2./3., 1./3., 3.); vec3 p = abs(fract(vec3(h) + t.xyz) * 6. - vec3(t.w)); return v * mix(vec3(t.x), clamp(p - vec3(t.x), 0., 1.), s); } // Rotation matrix function mat3 rotate3D(float angle, vec3 axis) { vec3 a = normalize(axis); float s = sin(angle); float c = cos(angle); float r = 1.0 - c; return mat3( a.x * a.x * r + c, a.y * a.x * r + a.z * s, a.z * a.x * r - a.y * s, a.x * a.y * r - a.z * s, a.y * a.y * r + c, a.z * a.y * r + a.x * s, a.x * a.z * r + a.y * s, a.y * a.z * r - a.x * s, a.z * a.z * r + c ); } void main() { vec2 r = u_resolution; vec2 FC = gl_FragCoord.xy; float t = u_time; vec4 o = vec4(0.0, 0.0, 0.0, 1.0); for(float i=0.,g=0.,e=1.,s=0.; ++i<99.;) { vec3 p = vec3((FC.xy-.5*r)/r+vec2(.95),g-3.) * rotate3D(-1.9,-vec3(1,3,9)); s = 3.; for(int j=0; j++<15; p=vec3(-.2,4,-1)-abs(abs(p)*e-vec3(3,4,3))) { e = 7.4/abs(dot(p,p*(.5+sin(t)*.013)+.22)); s *= e; } g += p.y/s+.0008*g; s = log(s)-g; o.rgb += hsv(.55/s,g/s,s/3.5e2); } outColor = o; } ` const createShader = (type: number, source: string) => { const shader = glContext.createShader(type) if (!shader) return null glContext.shaderSource(shader, source) glContext.compileShader(shader) if (!glContext.getShaderParameter(shader, glContext.COMPILE_STATUS)) { console.error("An error occurred compiling the shaders: " + glContext.getShaderInfoLog(shader)) glContext.deleteShader(shader) return null } return shader } const vertexShader = createShader(glContext.VERTEX_SHADER, vertexShaderSource) const fragmentShader = createShader(glContext.FRAGMENT_SHADER, fragmentShaderSource) if (!vertexShader || !fragmentShader) return const programContext = glContext.createProgram() if (!programContext) return glContext.attachShader(programContext, vertexShader) glContext.attachShader(programContext, fragmentShader) glContext.linkProgram(programContext) if (!glContext.getProgramParameter(programContext, glContext.LINK_STATUS)) { console.error("Unable to initialize the shader program: " + glContext.getProgramInfoLog(programContext)) return } setProgram(programContext) // Set up buffers and attributes const positionAttributeLocation = glContext.getAttribLocation(programContext, "a_position") const positionBuffer = glContext.createBuffer() glContext.bindBuffer(glContext.ARRAY_BUFFER, positionBuffer) const positions = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1] glContext.bufferData(glContext.ARRAY_BUFFER, new Float32Array(positions), glContext.STATIC_DRAW) const vaoContext = glContext.createVertexArray() glContext.bindVertexArray(vaoContext) glContext.useProgram(programContext) glContext.enableVertexAttribArray(positionAttributeLocation) glContext.vertexAttribPointer(positionAttributeLocation, 2, glContext.FLOAT, false, 0, 0) // Locate uniforms const resolutionUniformLocationContext = glContext.getUniformLocation(programContext, "u_resolution") const timeUniformLocationContext = glContext.getUniformLocation(programContext, "u_time") const mouseUniformLocationContext = glContext.getUniformLocation(programContext, "u_mouse") const zoomUniformLocationContext = glContext.getUniformLocation(programContext, "u_zoom") setResolutionUniformLocation(resolutionUniformLocationContext) setTimeUniformLocation(timeUniformLocationContext) setMouseUniformLocation(mouseUniformLocationContext) setZoomUniformLocation(zoomUniformLocationContext) setVao(vaoContext) window.addEventListener("mousemove", handleMouseMove) return () => { window.removeEventListener("mousemove", handleMouseMove) if (audioRef.current) { audioRef.current.pause() audioRef.current.currentTime = 0 } } }, []) // Removed zoom from dependencies to prevent audio restart useEffect(() => { const renderLoop = () => { const canvas = canvasRef.current const glContext = gl const programContext = program const vaoContext = vao if (!canvas || !glContext || !programContext || !vaoContext) return const resizeCanvasToDisplaySize = (canvas: HTMLCanvasElement) => { const displayWidth = canvas.clientWidth const displayHeight = canvas.clientHeight if (canvas.width !== displayWidth || canvas.height !== displayHeight) { canvas.width = displayWidth canvas.height = displayHeight return true } return false } resizeCanvasToDisplaySize(canvas) glContext.viewport(0, 0, canvas.width, canvas.height) glContext.clearColor(0, 0, 0, 1) glContext.clear(glContext.COLOR_BUFFER_BIT) glContext.bindVertexArray(vaoContext) // Update uniforms if (resolutionUniformLocation) { glContext.uniform2f(resolutionUniformLocation, canvas.width, canvas.height) } if (timeUniformLocation) { glContext.uniform1f(timeUniformLocation, (Date.now() - startTime) * 0.001) } if (mouseUniformLocation) { glContext.uniform2f(mouseUniformLocation, mousePos.x, mousePos.y) } if (zoomUniformLocation) { glContext.uniform1f(zoomUniformLocation, zoom) } glContext.drawArrays(glContext.TRIANGLES, 0, 6) setAnimationFrameId(requestAnimationFrame(renderLoop)) } if (gl && program && vao) { renderLoop() } return () => { if (animationFrameId) { cancelAnimationFrame(animationFrameId) } } }, [ gl, program, vao, zoom, mousePos, startTime, resolutionUniformLocation, timeUniformLocation, mouseUniformLocation, zoomUniformLocation, ]) return (

About

Tags

Share

About

Tags

Share

More from yoheinishitsuji

More Templates Like This